<template>
    <div class="low">
        <van-nav-bar :title="$t('ecology_node.button_three')" leftArrow @click-left="_return"/>
        <div class="lowMain">
            <img :src="lowImg" alt="">
            <button class="btn" @click="showLead" v-if="status != 3">{{$t('info.applys')}}</button>
            <div class="btns" v-if="status == 3">
                <button class="btn" >{{$t('info.light')}}</button>
                <button class="btn" @click="dialogShow = true">{{$t('info.destroy')}}</button>
            </div>
        </div>
        <van-dialog v-model="dialogShow" @confirm="dialogConfirm" @cancel="dialogCancel" show-cancel-button :cancelButtonText="$t('common.cancle')" :confirmButtonText="$t('common.confirm')">
            <img :src="warning">
            <p>{{$t('ecology_node.notice_three')}}</p>
            <p>{{$t('ecology_node.notice_five')}}</p>
        </van-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                lowImg:'',
                dialogShow:false,
                warning:require('../../assets/warnings.png'),
            }
        },
        methods: {
            changeImg(){
                let area = this.$i18n.locale
                if(area === 'zh'){
                    this.lowImg = require('../../assets/low_zh.png')
                }else if(area === 'en'){
                    this.lowImg = require('../../assets/low_en.png')
                }
            },
            _return(){
                this.$emit('_return')
            },
            showLead(){
                this._return()
                this.$parent.nodeShow = false
                this.$parent.lightShow = true
            },
            dialogConfirm(){
                this.$api.post('resonate/revokenode')
                    .then(res =>{
                        this.$toast(res.message)
                        this._return()
                    })
            },
            dialogCancel(){
                this.dialogShow = false
            }
        },
        created() {
            this.changeImg()
        },
        mounted() {

        },
        props:{
            status:{}
        }
    }
</script>

<style lang="stylus" scoped>
    bac = linear-gradient(90deg,rgba(42,42,42,1) 0%,rgba(46,46,46,1) 100%)!important
    back = linear-gradient(90deg,rgba(203,175,137,1) 0%,rgba(219,200,170,1) 100%) !important
    font = #CBAF89
    fonts = #898989
    [class*=van-hairline]::after{
        border: none;
    }
    .van-dialog
        img
            width 66px
            display block
            margin 15px auto
        p
            text-align center
            &:last-child
                margin-bottom 15px
    .van-cell:not(:last-child)::after
        border none
    .lowMain
        width 94%
        margin 0 auto
        img
            width 100%
            margin-top 15px
        .btn
            margin-top 20px
        .btns
            display flex
            display -webkit-flex
            justify-content space-between
            .btn
                width 43%
                &:first-child
                    width 54%
                    background:linear-gradient(90deg,rgba(42,42,42,1) 0%,rgba(46,46,46,1) 100%)
                    color #D8D8D8

</style>